<template>
  <div class="container">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery">
        <el-form-item label="名称"><el-input v-model="listQuery.keyword" placeholder="" clearable></el-input></el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="listQuery.rec_flag" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" plain size="middle" @click="search()">搜索</el-button>
          <el-button type="default" plain size="middle" @click="clear()">清空</el-button>
          <el-button type="primary" size="middle" @click="addUser()" v-if="controlBtn.add">添加设备组</el-button>
        </el-form-item>
      </el-form> 
    </div>
    <el-table
    :data="tableData"
    border
    style="width: 900px">
    <el-table-column
      prop="title"
      label="名称"
      align="center">
    </el-table-column>
    <el-table-column
      prop="sort_num"
      align="center"
      label="排序号"
      width="100">
    </el-table-column>
    <el-table-column
     v-if="controlBtn.edit&&controlBtn.del"
      align="center"
      label="操作"
      width="180">
      <template slot-scope="{row}">
        <el-button type="primary" size="small" @click="editUser(row)" v-if="controlBtn.edit">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUser(row)" v-if="controlBtn.del">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
    @pagination="getList" />
  <!-- 添加、编辑 -->
  <el-dialog @close="dialogClose" :title="dialogVisible.dia_title" :visible.sync='dialogVisible.show' :close-on-click-modal=false>
    <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
      <el-form-item label="设备组名称" prop="title"><el-input v-model="dialogVisible.title" placeholder="" clearable></el-input></el-form-item>
      <el-form-item label="排序号" prop="sort_num"><el-input v-model="dialogVisible.sort_num" type="number" placeholder="" clearable></el-input></el-form-item>
      <el-form-item>
        <el-button type="default" @click="dialogVisible.show=false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  </div>
</template>

<script>
import { group_list, group_save, group_delete } from '@/api/server'
import Pagination from '@/components/Pagination/index.vue'
import store from '@/store'

  export default {
    components:{
        Pagination
    },
    data() {
      return {
        tableData: [],
        listQuery:{
          page:1,
          page_size:10,
          pageSize:10,
          keyword:''
        },
        status:[{title:'启用',code:10},{title:'禁用',code:20}],
        total:0,
        roleList:[],
        dialogVisible:{
          show:false,
          dia_title:'添加设备组',
          sort_num:'',
          title:''
        },
        rules:{
          title:[{required:true,message:'名称不能为空',trigger: 'blur'}],
          sort_num:[{required:true,message:'排序号不能为空',trigger: 'blur'}]
        },
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        }
      }
    },
    methods:{
      dialogClose(){
        // this.$refs.dialogVisible.resetFields()
      },
      editUser(row){
        this.dialogVisible.dia_title='编辑设备组'
        this.dialogVisible.title=row.title
        this.dialogVisible.sort_num=row.sort_num
        this.dialogVisible.id=row.id
        this.dialogVisible.show=true
      },
      deleteUser(row){
        let that = this
       this.$confirm('确实删除当前设备组吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
       }).then(()=>{
        console.log(row)
          group_delete({id:row.id}).then(res=>{
              that.getList()
            })
       })
      },
      dialogSubmit(){
        let that = this
        this.$refs['dialogVisible'].validate((valid)=>{
          if(valid){
            let newList = JSON.parse(JSON.stringify(that.dialogVisible))
            newList.sort_num = parseInt(that.dialogVisible.sort_num)
            that.dialogVisible.show=false
            group_save(newList).then(res=>{
              that.getList()
            })
          }
        })
      },
      search(){
        this.listQuery.page = 1
        this.getList()
      },
      clear(){
        this.listQuery.page = 1
        this.listQuery.keyword = ''
        this.getList()
      },
      addUser(){
        this.dialogVisible.dia_title='添加设备组'
        this.dialogVisible.title=''
        this.dialogVisible.sort_num=''
        this.dialogVisible.id=0
        this.dialogVisible.show=true
      },
      getList(){
        group_list(this.listQuery).then(res=>{
          this.tableData = res.data
          this.total = res.total
        })
      }
    },
    mounted(){
      this.getList()
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.grouplist && mainRoutes.grouplist.length>0){
        mainRoutes.grouplist.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
</style>